<template>
  <div>
    <my-container :title="isEdit?'编辑月卡':(isRecharge?'月卡续费':'添加月卡')">
      <el-form ref="form" :model="formData" label-width="180px" :rules="rules">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>车辆信息</span>
          </div>
          <el-row>
            <el-col v-for="item in cardOne" :key="item.prop" :span="12">
              <el-form-item :label="item.label" :prop="item.prop">
                <el-input
                  v-model="formData[item.prop]"
                  :disabled="isRecharge"
                  :placeholder="'请输入'+item.label"
                />
              </el-form-item>
            </el-col>
          </el-row>

        </el-card>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>最近一次月卡缴费信息</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="有效日期:" prop="cardStartDate">
                <el-date-picker
                  v-model="formData.cardStartDate"
                  style="width:100%"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支付金额" prop="paymentAmount">
                <el-input v-model="formData.paymentAmount" placeholder="请输入支付金额" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="支付方式:" prop="paymentMethod">
                <el-select v-model="formData.paymentMethod" placeholder="请输入支付方式" style="width:100%">
                  <el-option v-for="item in payMetArr" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
      <template #footer>
        <div class="btn-container">
          <el-button
            @click=" $refs.form.resetFields()"
          >重置</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
      </template>
    </my-container>
  </div>
</template>

<script>
import MyContainer from '@/components/my-container'
import { addCardAPI, getCardDetailAPI, rechargeCardAPI, updateCardAPI } from '@/api/monthCard'
export default {
  components: {
    MyContainer },
  data() {
    return {
      payMetArr: [
        { label: '支付宝', value: 'Alipay' },
        { label: '微信', value: 'WeChat' },
        { label: '线下', value: 'Cash' }
      ],
      cardOne: [
        { label: '车主姓名', prop: 'personName' },
        { label: '联系方式', prop: 'phoneNumber' },
        { label: '车牌号码', prop: 'carNumber' },
        { label: '车辆品牌', prop: 'carBrand' }
      ],
      formData: {
        personName: '',
        phoneNumber: '',
        carNumber: '',
        carBrand: '',
        cardStartDate: '',
        cardEndDate: '',
        paymentAmount: '',
        paymentMethod: 'Alipay' // 支付方式,支付宝:Alipay,微信:WeChat,线下:Cash
      },
      rules: {
        personName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phoneNumber: [{ required: true, message: '请输入联系方式', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],
        carNumber: [{ required: true, message: '请输入车牌号码', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/, message: '请输入正确的车牌号码', trigger: 'blur'
          }
        ],
        carBrand: [{ required: true, message: '请输入车辆品牌', trigger: 'blur' }],
        cardStartDate: [{ required: true, message: '请选择日期', trigger: 'blur' }],
        paymentAmount: [{ required: true, message: '请输入支付金额', trigger: 'blur' },
          { pattern: /^[0-9]+(.[0-9]{1,2})?$/, message: '请输入正确的金额，最多保留两位小数', trigger: 'blur' }],
        paymentMethod: [{ required: true, message: '请选择支付方式', trigger: 'blur' }]
      },
      pickerOptions: {},
      isRecharge: this.$route.path.split('/').includes('renewMonthCard'),
      isEdit: this.$route.path.split('/').includes('editMonthCard')
    }
  },
  async created() {
    this.$route.params.id && this.getFormData()
  },

  methods: {
    async onSubmit() {
      await this.$refs.form.validate()
      this.setTime(this.formData.cardStartDate)
      if (this.isEdit) {
        delete this.formData.cardStatus
        await updateCardAPI(this.formData)
        this.$message.success('编辑成功')
      } else if (this.isRecharge) {
        const {
          cardStartDate,
          cardEndDate,
          paymentAmount,
          paymentMethod,
          carInfoId
        } = this.formData
        const data = {
          cardStartDate,
          cardEndDate,
          paymentAmount,
          paymentMethod,
          carInfoId
        }
        // 发续费的请求
        await rechargeCardAPI(data)
        this.$message.success('续费成功!')
      } else {
        await addCardAPI(this.formData)
        this.$message.success('添加成功')
      }
      this.$router.go(-1)
    },
    setTime(val) {
      val ? this.formData.cardStartDate = val[0] : ''
      val ? this.formData.cardEndDate = val[1] : ''
    },
    async getFormData() {
      this.formData = await getCardDetailAPI(this.$route.params.id)
      this.isEdit && (this.formData.cardStartDate = [this.formData.cardStartDate, this.formData.cardEndDate])
      // 月卡续费 指定开始日期为上次的结束日期
      if (this.isRecharge) {
        this.formData.paymentAmount = ''
        this.formData.paymentMethod = ''
        const enTime = new Date(this.formData.cardEndDate)
        enTime.setDate(enTime.getDate() + 1)
        this.pickerOptions = {
          disabledDate(time) {
            return time.getTime() < new Date(enTime).getTime() // 禁止选择特定日期之后的日期
          }
        }
      }
    }
  }
}
</script>

<style>
.el-card {
    margin-top: 30px;}
.el-form-item {
    margin-top: 10px ;
}
</style>
